<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据表格模板</title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>

		<div id="tpl-1" data-tpl>
			<div class="m-table" style="{{dTT.heightFn(d)}}">
				<table style="{{dTT.widthFn(d)}}">
					<tbody>
						<tr class="{{d.height?'fixed-top ':''}}thead">
							<td v-for="v in d.cols" class="{{dTT.classFn(v)}}" style="{{dTT.widthFn(v)}}{{dTT.alignFn(v)}}{{dTT.styleFn(v)}}">
								<div style="{{dTT.width2Fn(v)}}">{{dTT.titleFn(v)}}</div>
							</td>
						</tr>
						<tr class="tbody" v-for="(b,i) in d.data" item-index="{{i}}">
							<td v-for="t in d.cols" class="{{dTT.classFn(t)}}" style="{{dTT.alignFn(t)}}{{dTT.styleFn(t)}}">{{dTT.contentFn(t,b,i)}}</td>
						</tr>
						<tr v-if="d.data.length==0">
							<td class="textC" colspan="{{d.cols.length}}">暂无数据</td>
						</tr>
						<tr class="{{d.height?'fixed-bottom ':''}}tfoot" v-if="d.total">
							<td v-for="(v,i) in d.cols" class="{{dTT.classFn(v)}}" style="{{dTT.alignFn(v)}}{{dTT.styleFn(v)}}">{{d.total[i]}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<script type="text/javascript">
			var dTT = {
				widthFn: function(v) {
					if(typeof v.width == 'number') {
						v.width = v.width + 'px'
					};
					if(v.width) {
						return 'width:' + v.width + ';';
					} else {
						return ''
					}
				},
				width2Fn: function(v) {
					if(typeof v.width == 'number') {
						v.width = v.width + 'px'
					};
					if(v.width && (v.width + '').indexOf('%') == -1) {
						return 'min-width:' + v.width + ';';
					} else {
						return ''
					}
				},
				heightFn: function(v) {
					if(v.height) {
						return 'max-height:' + v.height + ';';
					} else {
						return ''
					}
				},
				alignFn: function(v) {
					if(v.align) {
						return 'text-align:' + v.align + ';';
					} else {
						return ''
					}
				},
				styleFn: function(v) {
					if(v.style) {
						return v.style;
					} else {
						return ''
					}
				},
				classFn: function(v) {
					var val = '';
					if(v.fixed == 'left') {
						val = ' fixed-left'
					} else if(v.fixed == 'right') {
						val = ' fixed-right'
					}
					return val;
				},
				titleFn: function(v) {
					var val = '';
					if(v.title) {
						val = v.title
					} else {
						if(v.type == 'checkbox') {
							if(v.checked) {
								val = '<input class="cb-all" type="checkbox" checked/>'
							} else {
								val = '<input class="cb-all" type="checkbox"/>'
							}
						}
					}
					return val;
				},
				contentFn: function(t, b, i) {
					var k = t.field,
						val = '';
					if(k) {
						if(typeof k === 'string') {
							val = b['' + k]
						} else {
							try {
								val = k(b)
							} catch(err) {
								console.error(JSON.stringify(t) + '<<<===中===>>>' + k + '===>>>错误')
							}
						}
					} else if(t.type == 'checkbox') {
						if(b.checked) {
							if(b.disabled) {
								val = '<input class="cb-item-disabled" type="checkbox" checked disabled/>'
							} else {
								val = '<input class="cb-item" type="checkbox" checked/>'
							}
						} else {
							if(b.disabled) {
								val = '<input type="checkbox" class="cb-item-disabled" disabled/>'
							} else {
								val = '<input class="cb-item" type="checkbox"/>'
							}
						}
					} else if(t.type == 'numbers') {
						val = i + 1
					}
					return val;
				}
			};
		</script>

		<script type="text/javascript">
			var data = [{
				'id': 'id1',
				'checked': true,
				'username': '用户名1',

			}, {
				'id': 'id2',
				'checked': false,
				'username': '用户名2',

			}];
			var config = {
				elem: '#test',
				width: '892px',
				//height: '332px',
				data: data,
				total: [1, 2, 3, 4],
				cols: [{
					type: 'checkbox',
					fixed: 'left'
				}, {
					type: 'numbers',
					fixed: 'center',
					title: '序号',
					width: 80,
				}, {
					field: function(d) {
						return 'ID:' + d.id
					},
					width: '20%',
					align: 'center',
					style: 'color:#f00;'
				}, {
					field: 'username',
					width: '80px',
					title: '用户名'
				}]
			};
			layui.use('laytpl', function() {
				laytpl('#tpl-1', config, function(v) {
					$('#tpl-1').html(v);
				})
			});
		</script>
	</body>

</html>